<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"
	contentType="text/html; charset=UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>员工刷脸统计表</title>
<link rel="stylesheet" type="text/css"
	href="<%=path%>/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="<%=path%>/jquery-easyui/themes/icon.css">
<style type="text/css">
</style>
<script type="text/javascript"
	src="<%=path%>/jquery-easyui/jquery-1.8.0.js"></script>
<script type="text/javascript"
	src="<%=path%>/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="<%=path%>/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path%>/js/jquery.json-2.4.js"></script>
<script type="text/javascript" src="<%=path%>/js/post.js"></script>
<script type="text/javascript">
	var path = '${pageContext.request.contextPath}';

	function formatTime(val, row) {
		if (!val) {
			return '';
		}
	
		var arr = val.split(' ');
		if (arr.length < 1) {
			return arr[0];
		}else{
			var dt = arr[0].split(':');
			if (dt.length > 1) {
				return dt[0] + ':' + dt[1];
			}
			return arr[1];
		}
	}
	
	function onLoadSuccessGrid(data) {

		var grid = $('#grid');
		grid.datagrid('showColumn', 'n1');
		grid.datagrid('showColumn', 'n2');
		grid.datagrid('showColumn', 'n3');
		grid.datagrid('showColumn', 'n4');
		grid.datagrid('showColumn', 'nightStart');
		grid.datagrid('showColumn', 'nightEnd');
		
		$("td[colSpan='10']").css('display','');
	
		if (!data || !data.schedule) {
			return;
		}

		grid.datagrid('hideColumn', 'n1');
		grid.datagrid('hideColumn', 'n2');
		grid.datagrid('hideColumn', 'n3');
		grid.datagrid('hideColumn', 'n4');
		
		if (data.schedule.nightId == null 
			|| data.schedule.nightId.length == 0) {
			grid.datagrid('hideColumn', 'nightStart');
			grid.datagrid('hideColumn', 'nightEnd');
			$("td[colspan='10']").css('display','none');
			return;
		}

		if (data.schedule.nightCheckList) {
			for ( var i = 1; i <= data.schedule.nightCheckList.length; i++) {
				grid.datagrid('showColumn', 'n' + i);
			}
		}
		
	}
	
	function onLoadSuccessTree(row, data) {
		var tree = $('#tree');
		var root = tree.treegrid('getRoot');
		if (!root) {
			return;
		}
		tree.treegrid('select',root.id);
		loadGird();
	}

	function loadGird(){
		var key=$('#searchKey').val();
		var tree = $('#tree');
		var row = tree.treegrid('getSelected');
		
		if (!row) {
			return;
		}
		var grid = $('#grid');
		grid.datagrid('loadData', []);
		grid.datagrid('load', { 
			id : row.id,
			name : key,
			startDate: $('#selectStartDate').datebox('getValue'),
			endDate: $('#selectEndDate').datebox('getValue')
		});
	}

	function print(){
		var key=$('#searchKey').val();
		var tree = $('#tree');
		var row = tree.treegrid('getSelected');
		
		if (!row) {
			return;
		}
		var id = row.id;
		var	startDate= $('#selectStartDate').datebox('getValue');
		var	endDate= $('#selectEndDate').datebox('getValue');
		
		var url = path + '/cardrecord/print/?id=' + id;
		url += '&key=' + key;
		url += '&startDate=' + startDate;
		url += '&endDate=' + endDate;
		window.open(url, "_blank", "toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,status=no");
	}
	
	$(function () {
		var date = new Date();
		date.setDate(1);
		$('#selectStartDate').datebox('setValue', date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate());
		date.setMonth(date.getMonth() + 1);
		date.setDate(date.getDate() - 1);
		$('#selectEndDate').datebox('setValue', date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate());
	});
</script>
</head>
<body class="easyui-layout">


	<!-- 部门 -->
	<div data-options="region:'west',split:true" style="width:160px;">
		<table id="tree" class="easyui-treegrid"
			data-options="
				fit:true,
				url: '<%=path%>/department/loadAll',
				idField: 'id',
				treeField: 'name',
				onLoadSuccess: onLoadSuccessTree,
				onClickRow: loadGird,
				queryParams:{id:2}
			">
			<thead>
				<tr>
					<th data-options="field:'name'" width="140">部门名称</th>
				</tr>
			</thead>
		</table>
	</div>


	<!-- 工具栏 -->
	<div id="tb" style="height:auto">
		时间从： <input id="selectStartDate" class="easyui-datebox"
			data-options="onSelect:loadGird" /> 到： <input id="selectEndDate"
			class="easyui-datebox" data-options="onSelect:loadGird" /> 检索条件: <input
			class="easyui-validatebox" type="text" id="searchKey"
			onchange="loadGird()" /> <a href="#" class="easyui-linkbutton"
			iconCls="icon-print" plain="true" onclick="print()">打印预览</a>

	</div>


	<div data-options="region:'center'">
		<table id="grid" class="easyui-datagrid"
			data-options="
			sortOrder:'asc',
			sortName:'date',
			remoteSort:false,
			idField:'id',
			fit:true,
			singleSelect:true,
			collapsible:true,
			url:'<%=path%>/cardrecord/loadAll/',
			toolbar:'#tb',
			rownumbers: true,
			showFooter: true,
			striped: true,
			onLoadSuccess: onLoadSuccessGrid
			">
			<thead data-options="frozen:true">
				<tr>
					<th data-options="field:'date',width:70,sortable:true" rowspan="2">日期</th>
					<th data-options="field:'departmentName',width:70,sortable:true"
						rowspan="2">单位</th>
					<th data-options="field:'employeeCode',width:70,sortable:true"
						rowspan="2">工号</th>
					<th data-options="field:'employeeName',width:60,sortable:true"
						rowspan="2">姓名</th>
					<th colspan="4">白班刷脸确认</th>
					<th colspan="10">夜班刷脸确认</th>
				</tr>
				<tr>
					<th
						data-options="field:'morningStart',width:56,formatter:formatTime">第一次</th>
					<th data-options="field:'morningEnd',width:56,formatter:formatTime">第二次</th>
					<th
						data-options="field:'afternoonStart',width:56,formatter:formatTime">第三次</th>
					<th
						data-options="field:'afternoonEnd',width:56,formatter:formatTime">第四次</th>

					<th data-options="field:'nightStart',width:56,formatter:formatTime">上班</th>
					<th data-options="field:'n1',width:56,formatter:formatTime">巡检一次</th>
					<th data-options="field:'n2',width:56,formatter:formatTime">巡检二次</th>
					<th data-options="field:'n3',width:56,formatter:formatTime">巡检三次</th>
					<th data-options="field:'n4',width:56,formatter:formatTime">巡检四次</th>
					<th data-options="field:'nightEnd',width:56,formatter:formatTime">下班</th>
				</tr>
			</thead>
		</table>

	</div>
</body>
</html>